<!-- 合同备案 弹窗 -->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showContractDialog"
      :before-close="cancel"
      width="934px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-form
        ref="queryParams"
        :model="queryParams"
        :rules="rules"
        label-width="108px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同名称" prop="contractName">
              <el-input
                v-model="queryParams.contractName"
                placeholder="请输入"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractNo">
              <el-input
                v-model="queryParams.contractNo"
                placeholder="请输入"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同金额" prop="contractAmount">
              <el-input
                v-model="queryParams.contractAmount"
                placeholder="请输入"
                maxlength="14"
              >
              <template slot="append">万元</template>
              </el-input>
              <!-- <div class="unit">万元</div> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签约时间" prop="signingTime">
              <el-date-picker
                v-model="queryParams.signingTime"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="甲方" prop="partyA">
              <el-input
                v-model="queryParams.partyA"
                placeholder="请输入"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙方" prop="partyB">
              <el-input
                v-model="queryParams.partyB"
                placeholder="请输入"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="甲方联系人" prop="contactPersonA">
              <el-input
                v-model="queryParams.contactPersonA"
                placeholder="请输入"
                maxlength="10"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙方联系人" prop="contactPersonB">
              <el-input
                v-model="queryParams.contactPersonB"
                placeholder="请输入"
                maxlength="10"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="甲方联系电话" prop="contactNumberA">
              <el-input
                v-model="queryParams.contactNumberA"
                placeholder="请输入"
                maxlength="13"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙方联系电话" prop="contactNumberB">
              <el-input
                v-model="queryParams.contactNumberB"
                maxlength="13"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招标公告网址" prop="tenderAnnouncementWebsite">
              <el-input
                v-model="queryParams.tenderAnnouncementWebsite"
                placeholder="请输入"
                maxlength="100"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中标公告网址" prop="websiteOfBidWinningAnnouncement">
              <el-input
                v-model="queryParams.websiteOfBidWinningAnnouncement"
                placeholder="请输入"
                maxlength="100"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招标公告文件" prop="tenderAnnouncementFile.fileName">
              <div
                class="files_upload_inp"
                @click="handleImportTwo"
              >
              <el-input
                v-model="queryParams.tenderAnnouncementFile.fileName"
                placeholder="请选择文件" clearable>
                <template slot="append">
                  <div class="img_box">
                    <img
                      src="@/assets/images/tripartite/icon_files_upload.png"
                      alt=""
                    />
                  </div>
                </template>
              </el-input>
              </div>
              <!-- <div class="files_upload_inp" v-if="isShow">
                <el-input
                  v-model="queryParams.tenderAnnouncementFile.fileName"
                  placeholder="请选择文件"
                  :disabled="isShow"
                />
                <div class="img_box">
                  <img
                    src="@/assets/images/tripartite/icon_files_upload.png"
                    alt=""
                  />
                </div>
              </div> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中标公告文件" prop="bidWinningAnnouncementFile.fileName">
              <div
                class="files_upload_inp"
                @click="handleImportOne"
              >
              <el-input
                v-model="queryParams.bidWinningAnnouncementFile.fileName"
                placeholder="请选择文件" clearable>
                <template slot="append">
                  <div class="img_box">
                    <img
                      src="@/assets/images/tripartite/icon_files_upload.png"
                      alt=""
                    />
                  </div>
                </template>
              </el-input>
              </div>
              <!-- <div class="files_upload_inp" v-if="isShow">
                <el-input
                  v-model="queryParams.bidWinningAnnouncementFile.fileName"
                  placeholder="请选择文件"
                  :disabled="isShow"
                />
                <div class="img_box">
                  <img
                    src="@/assets/images/tripartite/icon_files_upload.png"
                    alt=""
                  />
                </div>
              </div> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="合同扫描件"
              prop="scannedCopyOfContract.fileName"
              class="last-form-item"
            >
              <div
                class="files_upload_inp"
                @click="handleImport"
              >
                <el-input
                  v-model="queryParams.scannedCopyOfContract.fileName"
                  placeholder="请选择文件"
                />
                <div class="img_box">
                  <img
                    src="@/assets/images/tripartite/icon_files_upload.png"
                    alt=""
                  />
                </div>
              </div>
              <!-- <div class="files_upload_inp" v-if="isShow">
                <el-input
                  v-model="queryParams.scannedCopyOfContract.fileName"
                  placeholder="请选择文件"
                  :disabled="isShow"
                />
                <div class="img_box">
                  <img
                    src="@/assets/images/tripartite/icon_files_upload.png"
                    alt=""
                  />
                </div>
              </div> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 文件上传对话框 合同扫描件-->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="498px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".jpg, .png, .pdf, .zip, .rar, .7z"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入".jpg, .png, .pdf, .zip, .rar, .7z"格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 文件上传对话框 中标公告文件-->
    <el-dialog
      :title="uploadOne.title"
      :visible.sync="uploadOne.open"
      width="498px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-upload
        ref="uploadOne"
        :limit="1"
        accept=".jpg, .png, .pdf, .zip, .rar, .7z"
        :headers="uploadOne.headers"
        :action="uploadOne.url + '?updateSupport=' + uploadOne.updateSupport"
        :disabled="uploadOne.isUploading"
        :on-progress="handleFileUploadProgressOne"
        :on-success="handleFileSuccessOne"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入".jpg, .png, .pdf, .zip, .rar, .7z"格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileFormOne">确 定</el-button>
        <el-button @click="uploadOne.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 文件上传对话框 招标公告文件-->
    <el-dialog
      :title="uploadTwo.title"
      :visible.sync="uploadTwo.open"
      width="498px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-upload
        ref="uploadTwo"
        :limit="1"
        accept=".jpg, .png, .pdf, .zip, .rar, .7z"
        :headers="uploadTwo.headers"
        :action="uploadTwo.url + '?updateSupport=' + uploadTwo.updateSupport"
        :disabled="uploadTwo.isUploading"
        :on-progress="handleFileUploadProgressTwo"
        :on-success="handleFileSuccessTwo"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入".jpg, .png, .pdf, .zip, .rar, .7z"格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileFormTwo">确 定</el-button>
        <el-button @click="uploadTwo.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  addContractInfo,
  updateContractInfo,
  getContractInfo,
} from "@/api/projectCompany/myProject";

export default {
  name: "ContractDialog",
  props: {
    showContractDialog: {
      type: Boolean,
      default: false,
    },
    proId: {
      type: String,
      default: "",
    },
    rowData: {
      type: Object,
      default: () => {},
    },
  },
  inject: ["reload"],
  data() {
    return {
      // 弹出层标题
      title: "合同备案",
      // 表单参数
      queryParams: { scannedCopyOfContract: { fileName: "", fileUrl: "" } ,bidWinningAnnouncementFile:{fileName: "", fileUrl: ""},tenderAnnouncementFile:{fileName: "", fileUrl: ""}},
      // 表单校验
      rules: {
        contractName: [
          { required: true, message: "请输入合同名称", trigger: "blur" },
        ],
        // contractNo: [
        //   { required: true, message: "请输入合同编号", trigger: "blur" },
        //   { type: "number", message: "合同编号必须为数字值" },
        // ],
        contractNo: [
          { required: true, message: '请输入合同编号', trigger: 'blur' },
          {
            pattern:
              /(^[1-9][0-9]*$)/,
            message: "请输入正整数",
          },
        ],
        partyA: [
          { required: true, message: "请输入甲方名称", trigger: "blur" },
        ],
        partyB: [
          { required: true, message: "请输入乙方名称", trigger: "blur" },
        ],
        contactPersonA: [
          { required: true, message: "请输入甲方联系人", trigger: "blur" },
        ],
        contactPersonB: [
          { required: true, message: "请输入乙方联系人", trigger: "blur" },
        ],
        contactNumberA: [
          { required: true, message: "请输入电话", trigger: "blur" },
          // { type: "number", message: "电话必须为数字值" },
          // {
          //   pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          //   message: "请输入正确的手机号码",
          //   trigger: "blur"
          // }
        ],
        contactNumberB: [
          { required: true, message: "请输入电话", trigger: "blur" },
          // { type: "number", message: "电话必须为数字值" },
          // {
          //   pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          //   message: "请输入正确的手机号码",
          //   trigger: "blur"
          // }
        ],
        signingTime: [
          { required: true, message: "请选择时间", trigger: "blur" },
        ],
        //  contractAmount: [
        //   { required: true, message: "请输入合同金额", trigger: "blur" },
        //   { type: "number", message: "合同金额必须为数字值" },
        // ],
        contractAmount: [
          { required: true, message: "请输入合同金额", tigger: "blur" },
          {
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,6})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入正确格式,可保留六位小数",
          },
        ],
        "scannedCopyOfContract.fileName": [
          { required: true, message: "请选择文件", trigger: "change" },
        ],
      },
      // 上传文件参数  合同扫描件
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传文件名称
        fileName: "请选择文件",
      },
      // 上传文件参数  中标公告文件
      uploadOne: {
        open: false,
        title: "",
        isUploading: false,
        updateSupport: 0,
        headers: { Authorization: "Bearer " + getToken() },
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        fileName: "请选择文件",
      },
      // 上传文件参数  招标公告文件
      uploadTwo: {
        open: false,
        title: "",
        isUploading: false,
        updateSupport: 0,
        headers: { Authorization: "Bearer " + getToken() },
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        fileName: "请选择文件",
      },
      // 查询参数对应id
      relationId: undefined,
      // 控制按钮操作
      isShow: false,
      pickerOptions: {
        disabledDate(time) {
          //选择的日期大于等于当前日期（包含今天）
          return time.getTime() > Date.now();
          //若选择的日期大于当前日期（不包含今天）： time.getTime() < Date.now()
          //若选择的日期小于当前日期(不包含今天)： time.getTime() > Date.now() - 8.64e7
          //若选择的日期小于等于当前日期（包含今天）： time.getTime() > Date.now()
        }
      },
    };
  },
  watch: {
    showContractDialog(val) {
      console.log("监听合同", val);
      this.relationId = this.rowData.relationId;
      if (val == true && this.relationId && this.relationId != null) {
        this.getView();
      }
    },
  },
  methods: {
    // 获取详情
    getView() {
      this.relationId = this.rowData.relationId;
      if (this.relationId && this.relationId != null) {
        getContractInfo(this.relationId).then((res) => {
          if (res) {
            this.queryParams = res;
            // this.queryParams.contactNumberA = parseInt(res.contactNumberA);
            // this.queryParams.contactNumberB = parseInt(res.contactNumberB);
            this.queryParams.contractAmount = res.contractAmount + "";
            if (
              res.scannedCopyOfContract &&
              res.scannedCopyOfContract != null
            ) {
              this.queryParams.scannedCopyOfContract =
                res.scannedCopyOfContract;
            } else {
              this.queryParams.scannedCopyOfContract = {
                fileName: "",
                fileUrl: "",
              };
            }
            if(res.tenderAnnouncementFile){
              this.queryParams.tenderAnnouncementFile = res.tenderAnnouncementFile
            }else{
              this.queryParams.tenderAnnouncementFile = {fileName: "",fileUrl: "",};
            }
            if(res.bidWinningAnnouncementFile){
              this.queryParams.bidWinningAnnouncementFile = res.bidWinningAnnouncementFile
            }else{
              this.queryParams.bidWinningAnnouncementFile = {fileName: "",fileUrl: "",};
            }
            this.isShow = true;
          }
        });
      }
    },
    // 重置表单
    reset() {
      this.queryParams = {
        contactNumberA: "",
        contactNumberB: "",
        contactPersonA: "",
        contactPersonB: "",
        contractAmount: undefined,
        contractName: "",
        contractNo: undefined,
        partyA: "",
        partyB: "",
        scannedCopyOfContract: { fileName: "", fileUrl: "" },
        signingTime: "",
        tenderAnnouncementWebsite:"",
        websiteOfBidWinningAnnouncement:"",
        tenderAnnouncementFile: { fileName: "", fileUrl: "" },
        bidWinningAnnouncementFile: { fileName: "", fileUrl: "" },
      };
      this.resetForm("queryParams");
    },
    /** 取消按钮 */
    cancel() {
      this.reset();
      this.$emit("changeShowDialog", "false"); //调用父组件的自定义事件，并传值
    },
    /** 确定按钮 */
    submitForm() {
      this.$refs["queryParams"].validate((valid) => {
        if (valid) {
          this.queryParams.proId = this.proId;
          const contractId = this.relationId
          if (this.relationId) {
            updateContractInfo(contractId,this.queryParams).then((response) => {
              this.msgSuccess("修改成功");
              this.$emit("changeShowDialog", "false");
              this.reset();
              this.reload();
            });
          } else {
            addContractInfo(this.queryParams).then((response) => {
              console.log("新增合同备案提交", this.queryParams);
              this.msgSuccess("提交成功");
              this.$emit("changeShowDialog", "false");
              this.reset();
              this.reload();
            });
          }
        }
      });
    },
    /** 文件上传操作 */
    handleImport() {
      this.upload.title = "附件";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      if(response.code!=500&&response.data){
        this.upload.fileName = file.name;
        this.queryParams.scannedCopyOfContract.fileName = file.name;
        this.queryParams.scannedCopyOfContract.fileUrl = response.data.fileUrl;
        this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
      }else{
        this.$message.error(response.msg)
      }
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 文件上传操作 中标公告文件*/
    handleImportOne() {
      this.uploadOne.title = "附件";
      this.uploadOne.open = true;
    },
    // 文件上传中处理 中标公告文件
    handleFileUploadProgressOne(event, file, fileList) {
      this.uploadOne.isUploading = true;
      console.log("文件上传中", file);
    },
    // 文件上传成功处理 中标公告文件
    handleFileSuccessOne(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.uploadOne.open = false;
      this.uploadOne.isUploading = false;
      this.$refs.uploadOne.clearFiles();
      if(response.code!=500&&response.data){
        this.uploadOne.fileName = file.name;
        this.queryParams.bidWinningAnnouncementFile.fileName = file.name;
        this.queryParams.bidWinningAnnouncementFile.fileUrl = response.data.fileUrl;
        this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
      }else{
        this.$message.error(response.msg)
      }
    },
    // 提交上传文件 中标公告文件
    submitFileFormOne() {
      this.$refs.uploadOne.submit();
    },
    /** 文件上传操作 招标公告文件*/
    handleImportTwo() {
      this.uploadTwo.title = "附件";
      this.uploadTwo.open = true;
    },
    // 文件上传中处理 招标公告文件
    handleFileUploadProgressTwo(event, file, fileList) {
      this.uploadTwo.isUploading = true;
      console.log("文件上传中", file);
    },
    // 文件上传成功处理 招标公告文件
    handleFileSuccessTwo(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.uploadTwo.open = false;
      this.uploadTwo.isUploading = false;
      this.$refs.uploadTwo.clearFiles();
      if(response.code!=500&&response.data){
        this.uploadTwo.fileName = file.name;
        this.queryParams.tenderAnnouncementFile.fileName = file.name;
        this.queryParams.tenderAnnouncementFile.fileUrl = response.data.fileUrl;
        this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
      }else{
        this.$message.error(response.msg)
      }
    },
    // 提交上传文件 招标公告文件
    submitFileFormTwo() {
      this.$refs.uploadTwo.submit();
    },
  },
};
</script>

<style lang="scss" scoped>
// 文件上传
.files_upload_inp {
  .img_box {
    height: 36px;
    width: 42px;
    line-height: 36px;
    background: #0d72ff;
    text-align: center;
    border-radius: 0px 4px 4px 0px;
    position: absolute;
    right: -1px;
    top: -1px;
    img {
      width: 16px;
      height: 16px;
    }
  }
}
.unit {
  width: 52px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #666;
  background: #f6f6f6;
  border-radius: 0px 4px 4px 0px;
  border: 1px solid #d8d8d8;
  position: absolute;
  left: 87%;
  top: 0px;
}
</style>
<style lang="scss">
/* 弹出窗样式 */
.dialog-box {
  .el-dialog__body {
    padding: 24px 48px 24px 48px;
    border-top: 1px solid #ebecef;
    border-bottom: 1px solid #ebecef;
    label {
      font-weight: 400 !important;
    }
    .last-form-item {
      margin-bottom: 0;
    }
    .inline-layout {
      display: flex;
      justify-content: space-between;
    }
  }
  .el-dialog__footer {
    padding: 16px 20px;
  }
  .el-dialog__headerbtn {
    background: url("../../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-dialog__close {
      visibility: hidden;
    }
  }
}
</style>
